<template>
  <div>
    <el-form-item label="图片上传地址" label-width="110px">
      <el-input v-model="localData.options.action" clearable placeholder="图片上传地址" />
    </el-form-item>
    <div class="el-form-item el-form-item--small el-form--label-top">
      <label class="el-form-item__label" style="padding: 0">
        <el-link
          :underline="false"
          href="https://avuejs.com/plugins/ueditor-plugins.html"
          target="_blank"
        >参数设置 <i class="el-icon-question"></i
        ></el-link>
      </label>
      <div class="el-form-item__content">
        返回的数据结构层次
        <el-input
          v-model="localData.options.props.res"
          size="default"
          placeholder="返回的数据结构层次"
        />
        返回结构体图片地址字段
        <el-input
          v-model="localData.options.props.url"
          size="default"
          placeholder="返回结构体图片地址字段"
        />
      </div>
    </div>
    <el-form-item label="OSS">
      <el-select v-model="localData.options.oss" placeholder="oss不写则为普通上传" clearable>
        <el-option label="阿里" value="ali" />
        <el-option label="七牛" value="qiniu" />
      </el-select>
    </el-form-item>
    <template v-if="localData.options.oss == 'qiniu'">
      <div class="el-form-item el-form-item--small el-form--label-top">
        <label class="el-form-item__label" style="padding: 0">七牛oss配置：</label>
        <div class="el-form-item__content">
          AK：
          <el-input
            v-model="localData.options.qiniu.AK"
            size="default"
            clearable
            placeholder="七牛云的密钥(AK)"
          />
          SK：
          <el-input
            v-model="localData.options.qiniu.SK"
            size="default"
            clearable
            placeholder="七牛云的密钥(SK)"
          />
          scope：
          <el-input
            v-model="localData.options.qiniu.scope"
            size="default"
            clearable
            placeholder="七牛云存储的空间名"
          />
          url：
          <el-input
            v-model="localData.options.qiniu.url"
            size="default"
            clearable
            placeholder="空间的自定义域名"
          />
          deadline：
          <el-input
            v-model="localData.options.qiniu.deadline"
            size="default"
            clearable
            placeholder="token的过期时间"
          />
        </div>
      </div>
    </template>
    <template v-if="localData.options.oss == 'ali'">
      <div class="el-form-item el-form-item--small el-form--label-top">
        <label class="el-form-item__label" style="padding: 0">七牛oss配置：</label>
        <div class="el-form-item__content">
          region：
          <el-input
            v-model="localData.options.ali.region"
            size="default"
            clearable
            placeholder="region"
          />
          endpoint：
          <el-input
            v-model="localData.options.ali.endpoint"
            size="default"
            clearable
            placeholder="endpoint"
          />
          accessKeyId：
          <el-input
            v-model="localData.options.ali.accessKeyId"
            size="default"
            clearable
            placeholder="accessKeyId"
          />
          accessKeySecret：
          <el-input
            v-model="localData.options.ali.accessKeySecret"
            size="default"
            clearable
            placeholder="accessKeySecret"
          />
          bucket：
          <el-input
            v-model="localData.options.ali.bucket"
            size="default"
            clearable
            placeholder="bucket	"
          />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ConfigUeditor',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    }
  },
  watch: {
    'localData.options.oss': function (val) {
      debugger
      if (val == 'ali') this.localData.options.qiniu = {}
      else if (val == 'qiniu') this.localData.options.ali = {}
    },
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  }
}
</script>
